<template>
  <el-dialog
      :visible.sync="visible"
      @close="onClose"
      @closed="onClosed"
      width="900px"
      center
  >
    <template v-slot:title>
      <h2>【{{ stuName }}】试卷记录</h2>
    </template>
    <div class="tool-bar clear">
<!--      <el-button plain type="primary" @click="exportExcel">导出</el-button>-->
      <el-switch
          v-model="apiSetting.data.isCorrect"
          active-color="#13ce66"
      >
      </el-switch>
      <p><b>只看错题</b></p>
    </div>
    <data-table
        ref="dtb"
        v-if="apiSetting.data.examId"
        :api-setting="apiSetting"
        pagination
    >
      <el-table-column
          fixed
          prop="title"
          label="题目内容"
          show-overflow-tooltip
      />
      <el-table-column
          prop="options"
          label="题目选项"
          width="120"
          show-overflow-tooltip
      />
      <el-table-column
          prop="userChoice"
          label="学生选择"
          width="80"
          show-overflow-tooltip
      />
      <el-table-column
          prop="rightAnswer"
          label="正确答案"
          width="80"
          show-overflow-tooltip
      />
      <el-table-column
          prop="isCorrect"
          label="是否正确"
          width="100"
          show-overflow-tooltip
      />
      <el-table-column
          prop="chapterName"
          label="章节名称"
          width="120"
          show-overflow-tooltip
      />
      <el-table-column
          prop="subName"
          label="科目名"
          width="120"
          show-overflow-tooltip
      />
    </data-table>
  </el-dialog>
</template>

<script>
import dialog from "@/mixins/component/dialog";

export default {
  name: "viewPaper",
  mixins: [dialog],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/scoremanage/getCheckList",
        data: {
          isCorrect: false,
          examId: "",
          userId: "",
          upid: ""
        }
      },
      stuName: ""
    };
  },
  watch: {
    "apiSetting.data.isCorrect"() {
      this.apiSetting.data.pageNo = 1;
      this.$refs.dtb.loadData();
    }
  },
  methods: {
    setParams(params, reload = true) {
      Object.keys(params).map(key => {
        this.apiSetting.data[key] = params[key];
      });
      this.$nextTick(()=>{
        reload && this.$refs.dtb.loadData();
      })
    },
    exportExcel() {
      const {examId, userId, isCorrect} = this.apiSetting.data;
      this.$emit("export-excel", userId, examId, isCorrect);
    },
    onClosed() {
      this.apiSetting.data.isCorrect = false;
      this.stuName = "";
    }
  }
};
</script>

<style scoped>
.tool-bar {
  margin-bottom: 10px;
  line-height: 40px;
}

.tool-bar > * {
  float: right;
  height: 40px;
  margin-left: 10px;
}
</style>
